<template>
  <view class='searchRes_page' :style='{paddingTop:head_height+"px"}'>
    <!-- 搜索结果页 -->
    <view class='searchRes_head'>
      <view class='search_input'>
        <view class='input_item'>
          <view>
            <text class='iconfont icon-sousuo'></text>
          </view>
          <input type="text" placeholder="[北京+(美食|景点)]-(票务|酒店)-(湖州|疫情)">
        </view>
      </view>
      <view class='select_box'>
        <view>
          <view>相似折叠</view>
          <text class='iconfont icon-jiantou-copy-copy'></text>
        </view>
        <view>
          <view>标题和正文</view>
          <text class='iconfont icon-jiantou-copy-copy'></text>
        </view>
        <view>
          <view>全部信源</view>
          <text class='iconfont icon-jiantou-copy-copy'></text>
        </view>
      </view>
      <view class='select_box'>
        <view>
          <view>今日</view>
          <text class='iconfont icon-jiantou-copy-copy'></text>
        </view>
        <view>
          <view>排除关键词</view>
          <text class='iconfont icon-jiantou-copy-copy'></text>
        </view>
        <view>
          <view>指定信源</view>
          <text class='iconfont icon-jiantou-copy-copy'></text>
        </view>
      </view>
      <scroll-view class='tab_box' scroll-x='true'>
        <view
        class='item' 
        :class='{tabBar_on:headTab_index == tab_index}'
        v-for='(tab_item,tab_index) in tab' :key='tab_index'
        @tap='switchTab(tab_index)'>{{tab_item}}</view>
      </scroll-view>
    </view>
    <list2></list2>
  </view>
</template>

<script>

  import list2 from '@/pages/index/components/list2.vue'

  export default {
    components: {
      list2,
    },
    data() {
      return {
        tab: ['全部（150）','新闻（78）','论坛（60）','博客（56）','微博（50）',"微信（100）"],
        headTab_index: 0,
        head_height: 0,
      }
    },
    computed: {
      nav_height() {
        return this.$store.state.nav_height;
      },
    },
    onReady() {
      this.computeHeadHeight()
    },
    methods: {
      // 计算页面头部高度
      computeHeadHeight() {
        this.$getDomInfo(".searchRes_head","height").then((res) => {
          this.head_height = res
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.searchRes_page {
  width: 100%;
  .searchRes_head {
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    /*  #ifdef  H5  */
    top: 88upx;
    /*  #endif  */
    left: 0;
    z-index: 99;
    .search_input,.select_box {
      border-bottom: 1px solid #F4F4F4;
      padding: 20upx;
      box-sizing: border-box;
      width: 100%;
      display: flex;
    }
    .search_input {
      .input_item {
        background: #F4F4F4;
      }
    }
    .select_box {
      align-items: center;
      justify-content: space-between;
      >view {
        width: 226upx;
        height:52upx;
        background:#F4F4F4;
        border-radius:6upx;
        padding: 0 54upx 0 23upx;
        box-sizing: border-box;
        position: relative;
        >view {
          width: 100%;
          height:100%;
          display: flex;
          align-items: center;
          font-size: 26upx;
          color: #666;
        }
        .iconfont {
          position: absolute;
          top: 50%;
          right: 23upx;
          transform: translateY(-50%);
          font-size: 34upx;
          color: #999;
          transition: all .5s;
        }
      }
      .select_on {
        position: relative;
        &::after {
          content: "";
          width: 100%;
          height: 30upx;
          background: #F4F4F4;
          position: absolute;
          left: 0;
          bottom: -24upx;
        }
        >view {
          color: #0084FF;
        }
        .iconfont {
          transform: translateY(-50%) rotate(180deg);
          color: #0084FF;
        }
      }
    }
    .tab_box {
      width: 100%;
      height: 88upx;
      white-space: nowrap;
      .item {
        height: 88upx;
        line-height: 88upx;
        padding: 0 20upx;
        box-sizing: border-box;
        display: inline-block;
        color:#666;
        font-size: 28upx;
        position: relative;
      }
      .tabBar_on {
        &::after {
          bottom: 0;
        }
      }
    }
  }
}
</style>